<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Flexgrid :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <style>
    </style>

</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Flexgrid</h1>

        @@adsense

        <div class="margin20 no-margin-left no-margin-right sub-header text-light">
            Metro UI CSS includes a responsive flex grid system that appropriately scales up to 12 fixed columns and no limit non-fixed columns. It includes predefined classes for easy layout options.
        </div>

        <div class="example" data-text="example">
            <div class="flex-grid demo-grid">
                <div class="row">
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                    <div class="cell debug">1</div>
                </div>
                <div class="row">
                    <div class="cell colspan8 debug">8</div>
                    <div class="cell colspan4 debug">4</div>
                </div>
                <div class="row">
                    <div class="cell size4 debug">4</div>
                    <div class="cell size4 debug">4</div>
                    <div class="cell size4 debug">4</div>
                </div>
                <div class="row">
                    <div class="cell size2 debug">2</div>
                    <div class="cell size2 debug">2</div>
                    <div class="cell size2 debug">2</div>
                    <div class="cell size2 debug">2</div>
                    <div class="cell size2 debug">2</div>
                    <div class="cell size2 debug">2</div>
                </div>
                <h5>Default cell fixed size</h5>
                <div class="row">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                    <div class="cell debug">4</div>
                    <div class="cell debug">5</div>
                </div>
                <h5>Cell size auto</h5>
                <div class="row cell-auto-size">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                    <div class="cell debug">4</div>
                    <div class="cell debug">5</div>
                </div>

                <h5>Justify start</h5>
                <div class="row">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                </div>
                <h5>Justify center</h5>
                <div class="row flex-just-center">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                </div>
                <h5>Justify end</h5>
                <div class="row flex-just-end">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                </div>
                <h5>Justify space around</h5>
                <div class="row flex-just-sa">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                </div>
                <h5>Justify space between</h5>
                <div class="row flex-just-sb">
                    <div class="cell debug">1</div>
                    <div class="cell debug">2</div>
                    <div class="cell debug">3</div>
                </div>
            </div>
        </div>

        <h3>Introduction</h3>
        <p>
            Grid systems are used to create page layouts through a series of rows and columns that house your content. Here's how the grid system works:
        </p>
        <ul>
            <li>Rows must be placed within a <span class="tag info">.flex-grid</span> container</li>
            <li>Use rows to create horizontal groups of columns (container with class <span class="tag info">.row</span>).</li>
            <li>Content should be placed within columns (container with class <span class="tag info">.cell</span>).</li>
            <li>Default row no contain cells</li>
            <li>Cells can extended and take the place of multiple cells using the classes <span class="tag info">.colspan2 or .size2</span> ... <span class="tag info">.colspan12 or size12</span> </li>
            <li>Cells can extended and take the place of any sizes using the classes: for percent size set - <span class="tag info">.size-p10</span> ... <span class="tag info">.size-p100</span> with step 10 </li>
            <li>Cells can extended and take the place of any sizes using the classes: for pixels size set - <span class="tag info">.size-x100</span> ... <span class="tag info">.size-x1000</span> with step 100 </li>
            <li>To set automatic size of all columns in row you can add class <span class="tag">cell-auto-size</span> to row.</li>
            <li>To set automatic size to any columns in row you can add class <span class="tag">auto-size</span> to cell.</li>
            <li>
                To change the distribution of cells you can use the built-in classes:
                <ul>
                    <li>flex-dir-row</li>
                    <li>flex-dir-row-reverse</li>
                    <li>flex-dir-column</li>
                    <li>flex-dir-column-reverse</li>
                    <li>flex-wrap</li>
                    <li>flex-wrap-reverse</li>
                    <li>flex-no-wrap</li>
                    <li>flex-just-start</li>
                    <li>flex-just-end</li>
                    <li>flex-just-center</li>
                    <li>flex-just-sa (space around)</li>
                    <li>flex-just-sb (space between)</li>
                    <li>flex-align-stretch</li>
                    <li>flex-align-start</li>
                    <li>flex-align-end</li>
                    <li>flex-align-center</li>
                    <li>flex-align-base</li>
                    <li>flex-content-stretch</li>
                    <li>flex-content-start</li>
                    <li>flex-content-end</li>
                    <li>flex-content-center</li>
                    <li>flex-content-sb</li>
                    <li>flex-content-sa</li>
                    <li>flex-self-auto</li>
                    <li>flex-self-start</li>
                    <li>flex-self-end</li>
                    <li>flex-self-center</li>
                    <li>flex-self-base</li>
                    <li>flex-self-stretch</li>
                    <li>no-shrink</li>
                    <li>no-grow</li>
                </ul>
            </li>
        </ul>
    </div>

    @@hit

</body>
</html>